<%@page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/taglib.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>${bean.pageName}</title>
<%@include file="/common/public.jsp"%>
<link rel="stylesheet" type="text/css" href="${ctx}/css/main.css">
<link rel="stylesheet" type="text/css" href="${ctx}/css/query.css">
<script type="text/javascript">
window.Action = {};
Action.save = function(){
	jQuery("#items").val(Action.getSelectItems());
	jQuery("form:first").submit();
};
Action.preview = function(){
	var id = jQuery("#id").val();
	window.open("${ctx}/query/main.do?pageId=" + id);
};
Action.complete = function(id){
	jQuery("#id").val(id);
};
Action.getSelectItems = function(){
	var items = jQuery("#Selected input[type='checkbox']").get();
	var values = [];
	for(var i = 0 ; i < items.length ; i++){
		values.push(items[i].value)
	}
	var jsonArray = Tools.toJSON(values);
	return jsonArray;
};
Action.queryTempletEdit = function(isAdd){
	var id = isAdd ? "" : jQuery("#templetId").val();
	var url = '${ctx}/page/config/queryTempletEdit.do?id=' + id;
	Tools.window({width:640,height:320,url:url});
};
Action.addQueryTemplet = function( o ){
	jQuery("#templetId").append("<option value='" + o.value + "'>" + o.text + "</option>");
};
Action.tableConfigEdit = function(isAdd){
	var id = isAdd ? "" : jQuery("#tableId").val();
	// 用于初始化表格配置
	var queryId = isAdd ? jQuery("#queryId").val() : "";
	var url = '${ctx}/page/config/tableConfigEdit.do?id=' + id + "&queryId=" + queryId;
	var pageName = jQuery("#pageName").val();
	var value = Tools.window({args:window,width:800,height:650,url:url});
};
Action.addTableConfig = function( o ){
	jQuery("#tableId").append("<option value='" + o.value + "'>" + o.text + "</option>");
};
// 图表编辑
Action.chartConfigEdit = function(isAdd){
	var id = isAdd ? "" : jQuery("#chartId").val();
	var tableId = isAdd ? jQuery("#tableId").val() : "";
	var url = '${ctx}/page/config/chartConfigEdit.do?id=' + id + "&tableId=" + tableId;
	var value = Tools.window({args:window,width:800,height:600,url:url});
};
//添加图表配置
Action.addChartConfig = function( o ){
	jQuery("#chartId").append("<option value='" + o.value + "'>" + o.text + "</option>");
};
//查询配置
Action.queryConfigEdit = function( isAdd ){
	var id = isAdd ? "" : jQuery("#queryId").val();
	var url = '${ctx}/page/config/queryConfigEdit.do?configTypeId=1&id=' + id;
	Tools.window({args:window,width:800,height:650,url:url});
};
//增加查询配置选项
Action.addQueryConfig = function( o ){
	jQuery("#queryId").append("<option value='" + o.value + "'>" + o.text + "</option>");
};
Action.queryItemEdit = function(id){
	var itemId = (id ? id : "");
	var url = '${ctx}/page/config/queryItemEdit.do?id=' + itemId;
	Tools.window({width:640,height:300,url:url});
};
Action.addQueryItem = function( o ){
	var html = "<div class='item' id='" + o.value + "'>";
	html += "<input type=checkbox value=" + o.value + " onClick='Action.onClickItem(this)' alt='Selected' />";
	html += "<span onClick='Action.queryItemEdit(" + o.value + ")' class='hand'>" + o.text + "</span>";
	html += "<img src='${ctx}/image/del.gif' class='hand' onClick='Action.queryItemDel(" + o.value + ")' align='middle'/></div>";
	jQuery("#UnSelected").append(html);
};
//删除查询项
Action.queryItemDel = function( itemId ){
	var url = '${ctx}/page/config/queryItemDel.do?id=' + itemId;
	if( confirm("确认删除查询项?")){
		jQuery.get(url, function(data){
		  alert("删除成功!");
		  jQuery("#" + itemId).remove();
		}); 
	}
};
Action.onClickItem = function( _this ){
	var element = jQuery(_this).parent(); 
	jQuery("#" + _this.alt).append(element);
	_this.alt = (_this.alt == "Selected" ? "UnSelected" : "Selected");
}
jQuery( function(){
	jQuery("textarea").attr("wrap","off");
});
</script>
</head>
<body>
<e:form name="EditForm" action="/page/config/queryPageSave.do">
<e:hidden name="id" value="${bean.pageId}"/>
<e:hidden name="items" value=""/>
<table class="etable">
	<tr>
		<td class="tl">页面名称：</td>
		<td class="tc">
			<e:text name="pageName" className="input" validate="{required:true,maxlength:128}" value="${bean.pageName}">
				<e:param name="defValue" value=""/>
			</e:text>
		</td>
		<td class="tl">页面编码：</td>
		<td class="tc">
			<e:text name="pageCode" className="input" validate="{required:true,maxlength:128}" value="${bean.pageCode}">
				<e:param name="defValue" value="PAGE001"/>
			</e:text>
		</td>
	</tr>
	<tr>
		<td class="tl">查询配置：</td>
		<td class="tc">
			<e:select name="queryId" className="input" validate="{required:true,maxlength:32}"  value="${bean.queryId}">
				<e:param name="source" value="sql:select a.QUERY_NAME text , a.QUERY_ID value from QUERY_CONFIG a where a.STATE='A' and a.CONFIG_TYPE_ID = 1"/>
				<e:param name="defValue" value="1"/>
			</e:select>
			<img src="${ctx}/image/add.gif" class="hand" onClick="Action.queryConfigEdit(true)"/>
			<img src="${ctx}/image/edit.gif" class="hand" onClick="Action.queryConfigEdit(false)"/>
		</td>
		<td class="tl">表格配置：</td>
		<td class="tc">
			<e:select name="tableId" className="input"  validate="{required:true,maxlength:32}"  value="${bean.tableId}">
				<e:param name="source" value="sql:select TABLE_NAME + '[' + ISNULL(table_code,'') + ']' text, TABLE_ID value from TABLE_CONFIG where STATE='A'"/>
				<e:param name="defValue" value="1"/>
			</e:select>
			<img src="${ctx}/image/add.gif" class="hand" onClick="Action.tableConfigEdit(true)"/>
			<img src="${ctx}/image/edit.gif" class="hand" onClick="Action.tableConfigEdit(false)"/>
		</td>
	</tr>
	<tr>
		<td class="tl">页面模板：</td>
		<td class="tc">
			<e:select name="templetId" className="input" validate="{required:true,maxlength:32}"  value="${bean.templetId}">
				<e:param name="source" value="sql:select TEMPLET_ID value , TEMPLET_NAME + '[' + MAIN_PAGE +'][' + RESULT_PAGE + ']' text from QUERY_TEMPLET where STATE='A'"/>
				<e:param name="defValue" value="1"/>
			</e:select>
			<img src="${ctx}/image/add.gif" class="hand" onClick="Action.queryTempletEdit(true)"/>
			<img src="${ctx}/image/edit.gif" class="hand" onClick="Action.queryTempletEdit(false)"/>
		</td>
		<td class="tl">图表配置：</td>
		<td class="tc">
			<e:select name="chartId" className="input" validate="{required:true,maxlength:32}"  value="${bean.chartId}">
				<e:param name="source" value="sql:select CHART_ID value, CHART_NAME text from CHART_CONFIG where STATE='A'"/>
				<e:param name="defValue" value="1"/>
			</e:select>
			<img src="${ctx}/image/add.gif" class="hand" onClick="Action.chartConfigEdit(true)"/>
			<img src="${ctx}/image/edit.gif" class="hand" onClick="Action.chartConfigEdit(false)"/>
		</td>
	</tr>
	<tr>
		<td class="tl">引用名称：</td>
		<td class="tc">
		<e:text name="varName" className="input" validate="{required:true,maxlength:32}" value="${bean.varName}">
			<e:param name="defValue" value="Table"/>
		</e:text>
		</td>
		<td class="tl">锁定表头：</td>
		<td class="tc">
			<e:select name="lockHead" className="input"  validate="{required:true,maxlength:32}"  value="${bean.lockHead}">
				<e:param name="source" value="json:[{text:'锁定',value:'1'},{text:'不锁定',value:'0'}]"/>
				<e:param name="defValue" value="1"/>
			</e:select>
		</td>
	</tr>
	<tr>
		<td class="tl">自动查询：</td>
		<td class="tc">
			<e:select name="autoQuery" className="input" validate="{required:true,maxlength:32}" value="${bean.autoQuery}">
				<e:param name="source" value="json:[{text:'不自动查询',value:'0'},{text:'自动查询',value:'1'}]"/>
				<e:param name="defValue" value="0"/>
			</e:select>
		</td>
		<td class="tl">分页：</td>
		<td class="tc">
		<e:select name="pagination" className="input" validate="{required:true,maxlength:32}"  value="${bean.pagination}">
			<e:param name="source" value="json:[{text:'分页',value:'1'},{text:'不分页',value:'0'}]"/>
			<e:param name="defValue" value="0"/>
		</e:select>
		</td>
	</tr>
	<tr>
		<td class="tl">自定义单元：</td>
		<td class="tc"><e:text name="cellCustom" style="width:100%" value="${bean.cellCustom}" /></td>
		<td class="tl">自定义行：</td>
		<td class="tc"><e:text name="rowCustom" style="width:100%" value="${bean.rowCustom}"/></td>
	</tr>
	<tr>
		<td class="tl">请求URL：</td>
		<td class="tc" colspan="3"><e:text name="pageUrl" style="width:100%" value="${bean.pageUrl}"/></td>
	</tr>
	<tr>
		<td class="tl">页面按钮：</td>
		<td class="tc"><e:textarea name="button" style="width:100%; height:120px" value="${bean.button}"/></td>
		<td class="tl">页面描述：</td>
		<td class="tc"><e:textarea name="pageDesc" style="width:100%; height:120px" value="${bean.pageDesc}"/></td>
	</tr>
	<tr>
		<td class="tl">查询页面脚本：</td>
		<td class="tc"><e:textarea name="mainScript" style="width:100%; height:120px" value="${bean.mainScript}"/></td>
		<td class="tl">结果页面脚本：</td>
		<td class="tc"><e:textarea name="resultScript" style="width:100%; height:120px" value="${bean.resultScript}"/></td>
	</tr>
	<tr>
		<td class="tl">未选择：</td>
		<td class="tc">
		<div id="UnSelected" style="height:200px; overflow:auto; width:100%;">
		<img src="${ctx}/image/add.gif" class="hand" onClick="Action.queryItemEdit()"/>
		<c:forEach items="${itemu}" var="item" varStatus="status">
			<div class="item" id="${item.itemId}">
			<input type="checkbox" value="${item.itemId}" onClick='Action.onClickItem(this)' alt="Selected"/>
			<span onClick="Action.queryItemEdit(${item.itemId})"  class="hand">${item.itemName}</span><img src="${ctx}/image/del.gif" class="hand" onClick="Action.queryItemDel(${item.itemId})" align="middle"/>
			</div>
			<c:choose>
				<c:when test="${status.count % 5 == 0}">
					
				</c:when>
			</c:choose>
		</c:forEach>
		</div>
		</td>
		<td class="tl">已选择：</td>
		<td class="tc">
		<div id="Selected" style="height:200px; width:100%;overflow:auto;">
		<c:forEach items="${items}" var="item" varStatus="status">
			<div class="item" id="${item.itemId}">
			<input type="checkbox" value="${item.itemId}"  alt="UnSelected" onClick='Action.onClickItem(this)' checked="checked"/>
			<span onClick="Action.queryItemEdit(${item.itemId})"  class="hand">${item.itemName}</span><img src='${ctx}/image/del.gif' class='hand' onClick='Action.queryItemDel(${item.itemId})' align='middle'/>
			</div>
			<c:choose>
				<c:when test="${status.count % 100 == 100}">
					
				</c:when>
			</c:choose>
		</c:forEach>	
		</div>
		</td>
	</tr>
	<tr>
		<td align="center" colspan="4" height="30">
		<input id="SaveButton" type="button" class="btn_orange_b2" value="保 存" onClick="Action.save()"/>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input id="SaveButton" type="button" class="btn_blue_b2" value="预 览" onClick="Action.preview()"/>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input id="SaveButton" type="button" class="btn_blue_b2" value="关 闭" onClick="window.close()"/>
		</td>
	</tr>
</table>
</e:form>
</body>
</html>